<template>
    <view class="terminal">
        <view class="header"></view>
        <view class="title">
            <view class="header-title">
                <view>{{powerOneData.powerplanName}}</view>
                <view>{{powerOneData.powerplantAddress}}</view>
            </view>
            <view class="msg">
                <view class="up">
                    <view class="box1">
                        <text>编号</text>
                        <text>{{bridge[0].stationNumeration}}</text>
                    </view>
                    <view class="box2">当前电价</view>
                    <view class="box3">
                        <view class="left">
                            <text>￥</text>
                            <text>{{bridge[0].stationPrice}}</text>
                            <text>元/度</text>
                        </view>
                        <view class="rigth" @click="show">
                            <text>电价详情</text>
                            <image src="https://z3.ax1x.com/2021/04/08/cYkTVs.png" mode=""></image>
                        </view>
                    </view>
                </view>
                <view class="down">
                    <view class="down-item">
                        <view class="as">充电类型</view>
                        <view>{{bridge[0].stationType==0?'交流电':'直流电'}}</view>
                    </view>
                    <view class="down-item">
                        <view class="as">充电品牌</view>
                        <view>{{bridge[0].stationBrand}}</view>
                    </view>
                    <view class="down-item">
                        <view class="as">充电功率</view>
                        <view>{{bridge[0].stationMaximumPower}}Kw</view>
                    </view>
                </view>
            </view>
            <wyb-modal ref="modal" title="电价详情" custom="true" :show-cancel="flag"  mask-click-close="true">
                <view class="time">
                    <text>00:00-07:00</text>
                    <text>1.15元/度</text>
                </view>
                <view class="time">
                    <text>00:00-07:00</text>
                    <text>1.15元/度</text>
                </view>
                <view class="time">
                    <text>00:00-07:00</text>
                    <text>1.15元/度</text>
                </view>
            </wyb-modal>
            <button type="primary" @click="open">立即充电</button>
        </view>
    </view>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapMutations, mapActions } = createNamespacedHelpers('map');
export default {
    data() {
        return {
            flag: false
        };
    },
    computed:{
        ...mapState(['powerOneData','bridge'])
    },
    methods: {
        show() {
            this.$refs.modal.showModal();
        },
        open() {
            // this.fn();
            uni.redirectTo({
                url:"../electric/electric"
            })
        },
        fn() {
            uni.scanCode({
                success: function(res) {
                    uni.redirectTo({
                        url: '../electric/electric'
                    });
                    console.log('条码类型：' + res.scanType);
                    console.log('条码内容：' + res.result);
                }
            });
        }
    },
    onLoad() {}
};
</script>

<style lang="scss">
.terminal {
    background-color: #f9f9f9;
    height: 100vh;
    .header {
        padding: 0 30rpx;
        height: 120rpx;
        background-color: #ff6208;
        box-sizing: border-box;
        // padding-top: 60rpx;
    }
    .title {
        padding: 0 30rpx;
        .header-title {
            margin: auto;
            height: 130rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            padding: 24rpx 0rpx 0rpx 24rpx;
            margin-top: -60rpx;
            view:nth-child(1) {
                font-size: 32rpx;
                color: #333333;
                font-weight: 600;
            }
            view:nth-child(2) {
                font-size: 24rpx;
                color: #999999;
                margin-top: 28rpx;
                box-sizing: border-box;
            }
        }
        .msg {
            margin-top: 40rpx;
            // height: 330rpx;
            background-color: #ffffff;
            border-radius: 24rpx;
            .up {
                height: 150rpx;
                padding: 16rpx 24rpx 40rpx 24rpx;
                border-bottom: 2rpx solid #ffcccccc;
                .box1 {
                    font-size: 36rpx;
                    color: #333333;
                    font-weight: 600;
                    margin-bottom: 24rpx;
                    text {
                        margin-right: 12rpx;
                    }
                }
                .box2 {
                    font-size: 24rpx;
                    color: #666666;
                    margin-bottom: 24rpx;
                }
                .box3 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .left {
                        text:nth-child(1) {
                            font-size: 24rpx;
                            color: #ff5300;
                        }
                        text:nth-child(2) {
                            font-size: 40rpx;
                            color: #ff5300;
                        }
                        text:nth-child(3) {
                            font-size: 20rpx;
                            color: #333333;
                        }
                    }
                    .rigth {
                        text {
                            font-size: 24rpx;
                            color: #999999;
                            margin-right: 8rpx;
                        }
                        image {
                            width: 12rpx;
                            height: 18rpx;
                        }
                    }
                }
            }
            .down {
                height: 100rpx;
                padding: 40rpx 0 24rpx 0;
                display: flex;
                justify-content: space-around;
                text-align: center;
                font-size: 28rpx;
                color: #333333;
                .down-item {
                    width: 96rpx;
                    height: 100rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-wrap: wrap;
                }
                .as {
                    font-size: 24rpx;
                    color: #999999;
                }
            }
        }
    }
    wyb-modal {
        .wyb-modal-line {
            height: 0;
        }
        .wyb-modal-title {
            display: flex;
            align-items: center;
            height: 80rpx;
        }
        .wyb-modal-content {
            border-top: 1rpx solid #cccccc;
        }
        .time {
            width: 400rpx;
            font-size: 28rpx;
            color: #333333;
            margin-bottom: 15rpx;
            text:nth-child(2) {
                margin-left: 100rpx;
            }
        }
    }

    button {
        width: 512rpx;
        height: 92rpx;
        font-size: 36rpx;
        color: #ffffff;
        border-radius: 46rpx;
        background-color: #ff8219;
        margin-top: 200rpx;
    }
}
</style>
